<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <title>坐标转换</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />
    <script src="/jquery/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <!--左侧查询form start  -->
        <div class="left">
            <form>
                <span>输入地址: </span><input type="text" name="filesPath" id="filesPath" placeholder="输入地址"
                    style="width: 300px;height: 20px;" /></br></br>
                <span>输出地址: </span><input type="text" name="outpath" id="outpath" placeholder="输出地址"
                    style="width: 300px;height: 20px;" /></br></br>
                <span>坐标加密/解密方法: </span><select name="method" id="method" value="" style="width: 310px;height: 30px;">
                    <option value=""></option>
                    <option value="wgs84togcj02">wgs84togcj02</option>
                    <option value="gcj02towgs84">gcj02towgs84</option>
                </select></br></br>
                <span>输入坐标系: </span><input type="text" name="iSrid" id="iSrid" placeholder="输入坐标系：EPSG:4326"
                    style="width: 300px;height: 20px;" /></br></br>
                <span>输出坐标系: </span><input type="text" name="oSrid" id="oSrid" placeholder="输出坐标系：EPSG:3857"
                    style="width: 300px;height: 20px;" /></br></br>

            </form>
            <button class="btn btn-default" id="formBtn">转换</button>
        </div>
        <!--左侧查询form end  -->
    </div>

    <script>
        $("#method").on('change', (e) => {
            const val = $("#method").val();
            // 选择加密解密，gcj02与wgs84互转
            if (val) {
                $("#iSrid").hide()
                $("#oSrid").hide()
            } else {    //不同坐标参考系转换，4326转3857
                $("#iSrid").show()
                $("#oSrid").show()
            }
            return e
        });
        $("#formBtn").on('click', function () {
            const formData = {
                filesPath: $("#filesPath").val(),
                method: $("#method").val(),
                iSrid: $("#iSrid").val(),
                oSrid: $("#oSrid").val(),
                outpath: $("#outpath").val(),
            }
            $.ajax({
                url: 'transRequest/transformByDir',
                type: 'get',
                data: formData,
                success: function (res) {
                    alert(res.message);
                }
            });
        })

    </script>

</body>

</html>